<html>
    <head>
        <title>Create mouse cursor using a canvas</title>
        <style>
        </style>
        <script|module>

            function generateMouseCursorImage(width,height) {
                return new Graphics.Image(width, height, function(gfx) {
                    gfx.strokeStyle = "red";
                    gfx.lineWidth = 2;
                    gfx.fillStyle = "gold";
                    gfx.draw(new Graphics.Path("M 1 1 L 99 0 L 35 35 L 0 99 Z"));
                });
            }

            document.body.on("mousedown", function(evt) {
                this.state.capture(true);
            });

            document.body.on("mousedragrequest", function(evt) {
                let image = generateMouseCursorImage(100,100);
                this.style.setCursor(image, 0, 0);
                return true;
            });

            document.body.on("mouseup", function(evt) {
                this.style.setCursor(null);
                this.state.capture(false);
            });

        </script>
    </head>
    <body>
        <h1>Drag me</h1>

        Cursor image is generated by script, see: generateMouseCursorImage()
    </body>
</html>